import React from "react";
import {
  Box,
  Flex,
  Text,
  Slider,
  SliderFilledTrack,
  SliderMark,
  SliderThumb,
  SliderTrack,
} from "@chakra-ui/react";
import { DPIGroup, DpiConfig } from "@/src/types/types.d";
import { useTranslation } from "@/src/i18n";

interface DpiSliderSectionProps {
  curDpiValue: number;
  selectedDpi: number;
  dpiGroups: DPIGroup[];
  dpiConfig: DpiConfig;
  dpiMode?: number;
  onDpiValueChanging: (value: number) => void;
  onDpiValueChange: (value: number) => void;
}

const DpiSliderSection: React.FC<DpiSliderSectionProps> = ({
  curDpiValue,
  selectedDpi,
  dpiGroups,
  dpiConfig,
  onDpiValueChanging,
  onDpiValueChange,
}) => {
  const { t } = useTranslation("");

  const dpiSliderMarks = dpiConfig.sliderMarks;
  const minDpi = dpiConfig?.min;
  const maxDpi = dpiConfig?.max;
  const step = 50;

  const renderSliderMarks = () => {
    if (!dpiSliderMarks) return null;

    return dpiSliderMarks.map((value, index) => (
      <SliderMark
        key={value}
        value={value}
        mt="-30px"
        ml="-10px"
        fontSize="sm"
        color="white"
        className="relative"
      >
        {value}
        {value === dpiConfig?.min && (
          <Box className="absolute top-[34px] left-[18px] w-[8px] h-[8px] rounded-full bg-gray-300 opacity-40" />
        )}
        {value !== dpiConfig?.min &&
          value !== dpiConfig?.max &&
          index !== dpiSliderMarks.length - 1 && (
            <Box className="absolute top-[34px] left-[18px] w-[8px] h-[8px] rounded-full bg-gray-300 opacity-40" />
          )}
        {value === dpiConfig?.max && (
          <Box className="absolute top-[34px] left-[-10px] w-[8px] h-[8px] rounded-full bg-gray-300 opacity-40" />
        )}
      </SliderMark>
    ));
  };

  return (
    <Flex className="flex-col justify-between items-center flex-1">
      <Flex alignItems="center" justifyContent="center" gap={4} color="white">
        <Text>（{t("slow")}）</Text>
        <Slider
          value={curDpiValue}
          min={minDpi}
          max={maxDpi}
          step={step}
          width="600px"
          height="30px"
          onChange={onDpiValueChanging}
          onChangeEnd={onDpiValueChange}
        >
          <SliderTrack bg="gray.200" height="24px" borderRadius="full">
            <SliderFilledTrack
              bg={dpiGroups[selectedDpi]?.dpiColor || "#0066FF"}
              borderRadius="full"
            />
          </SliderTrack>
          {renderSliderMarks()}
          <SliderThumb
            width="24px"
            height="24px"
            border="none"
            bg="#ffffff"
            boxShadow="0 2px 4px rgba(0, 0, 0, 0.1)"
            _hover={{
              cursor: "grab",
              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.15)",
            }}
            _active={{
              cursor: "grabbing",
              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.15)",
            }}
            display="flex"
            alignItems="center"
            justifyContent="center"
            marginLeft="-6px"
            position="relative"
          />
        </Slider>
        <Text>（{t("fast")}）</Text>
      </Flex>
    </Flex>
  );
};

export default DpiSliderSection;
